<template>
  <layout style="text-align: center;">
    <div v-if="hw === null">
      加载作业中...
    </div>
    <div v-else>
      <!-- 作业题目展示区域 -->
      <h2 class="hw-title">{{ hw.homeworkInfo.homeworkName }}</h2>
      <!-- 作业状态显示区域 -->
      <h1 class="hw-status">{{ hwStatusSHow }}</h1>
      <!-- 作业起止时间展示 -->
      <div class="hw-time-gap">
        <h2>开始时间： {{ hw.homeworkInfo.startTime }}</h2>
        <h2>结束时间： {{ hw.homeworkInfo.endTime }}</h2>
      </div>
      <!-- 面向学生用户的作业详情按钮 -->
      <van-button
        v-if="userType === 1"
        :color="stuHwBtnInfo.color"
        :disabled="stuHwBtnInfo.disable"
        block
        style="width: 80%;margin: 0 auto;font-size: large;font-weight: bold;margin-top: 3em;"
        @click="toStuQuestionPage"
      >{{ stuHwBtnInfo.text }}</van-button>
      <!-- 面向教师用户的作业详情按钮 -->
      <van-button
        v-else
        :color="teaHwBtnInfo.color"
        :disabled="teaHwBtnInfo.disable"
        block
        style="width: 80%;margin: 0 auto;font-size: large;font-weight: bold;margin-top: 3em;"
        @click="toTeaQuestionPage"
      >{{ teaHwBtnInfo.text }}</van-button>
      <!-- 题目统计信息 -->
      <div
        v-if="hw.status!=0"
        style="margin-top: 2em;"
      >
        <h3>共{{ questionCount.totalNum }}题</h3>
        <h4>
          其中选择题{{ questionCount.chooseNum }}道，
          填空题{{ questionCount.fillNum }}道，
          问答题{{ questionCount.answerNum }}道
        </h4>
      </div>
    </div>
  </layout>
</template>

<script>
import Layout from '@/views/layout'
import { mapState } from 'vuex'
import { incrLoading, decrLoading } from '@/utils/pageLoading'

export default {
  name: 'Homework',
  components: {
    Layout
  },
  data () {
    return {
      stuNo: '',
      userType: null
    }
  },
  computed: {
    hwStatusSHow () { // 作业状态展示数据
      const status = this.hw.status
      if (status === 0) { // 未开始
        return this.hw.statusShow
      } else if (status === 1) { // 未作答
        return this.hw.statusShow
      } else if (status === 2) { // 已作答
        return this.hw.statusShow
      } else if (status === 3) { // 超时未作答
        return this.hw.statusShow
      } else if (status === 4) { // 待批阅
        return this.hw.statusShow
      } else if (status === 5) { // 已批阅
        return this.hw.checkInfo.score >= 0 ? this.hw.checkInfo.score + '分' : this.hw.statusShow
      } else {
        return 'Error'
      }
    },
    stuHwBtnInfo () { // 学生用户操作按钮信息
      const status = this.hw.status
      if (status === 0) {
        return { disable: true, text: '答题未开始', color: 'grey' }
      } else if (status === 1) {
        return { disable: false, text: '开始答题', color: '#409eff' }
      } else if (status === 2) {
        return { disable: false, text: '修改答案', color: '#409eff' }
      } else if (status === 3 || status === 4 || status === 5) {
        return { disable: false, text: '查看作业', color: '#07c160' }
      } else {
        return 'Error'
      }
    },
    teaHwBtnInfo () { // 教师用户操作按钮信息
      const status = this.hw.status
      if (status === 0) {
        return { disable: true, text: '作业未开始', color: 'grey' }
      } else if (status === 1) {
        return { disable: true, text: '作业未提交', color: '#409eff' }
      } else if (status === 2 || status === 3 || status === 4 || status === 5) {
        return { disable: false, text: '查看作业详情', color: '#07c160' }
      } else {
        return 'Error'
      }
    },
    ...mapState({
      hw: state => {
        return state.homework.hw
      },
      questionCount: state => {
        return state.homework.questionCount
      }
    })
  },
  created () {
    incrLoading()
    // 获取个人信息
    this.$store.dispatch('user/getMemInfo').then(({ memberInfo, userType }) => {
      let stuNo = memberInfo.stuNo
      if (!stuNo) { // 如果从个人信息中获取学号为空，说明是教师用户，尝试从路由获取学号
        stuNo = this.$route.query.stuNo
      }
      this.stuNo = stuNo
      this.userType = userType
      const homeworkId = Number.parseInt(this.$route.query.homeworkId)
      // 获取作业数据
      this.$store.dispatch('homework/refreshHwInfo', { stuNo, homeworkId }).then((data) => {
        decrLoading()
      }).catch(() => { decrLoading() })
    })
  },
  methods: {
    toStuQuestionPage () {
      this.$router.push({
        name: 'HomeworkQuestion',
        query: {
          qtype: 0,
          qidx: 0,
          stuNo: this.stuNo,
          courseId: this.$route.query.courseId,
          userType: this.userType,
          homeworkId: this.$route.query.homeworkId
        }
      })
    },
    toTeaQuestionPage () {
      // 和学生用户的一样
      this.toStuQuestionPage()
    }
  }
}
</script>

<style scoped>
.hw-title {
  font-size: 2em;
  font-weight: bold;
  margin-top: 3em;
}
.hw-status {
  font-size: xx-large;
  color: #409eff;
  margin-top: 1em;
}
.hw-time-gap {
  margin-top: 10em;
  color: slategray;
  font-size: 0.9em;
}
</style>
